<template>
  <div class="v" v-loading="loading">
    <!-- <div style="overflow: hidden;" class="12132132">
      <section>
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true">
            <el-form-item>
              <el-input v-model="inputVal" placeholder="城市名称" @keyup.native="inputChange"
                        style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">获取地理位置</el-button>
            </el-form-item>
            <el-form-item>
              <el-input v-model="latlngCurrent" placeholder="坐标值" style="width: 246px;"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </section>
    </div> -->
	<!--  -->
		
		<div class="l">
			<div class="tab">
				<div @click="change(1)" style="width:50%" :class="tab==1?'tabactive':''">打车</div>
				<div @click="change(2)" style="width:50%" :class="tab==2?'tabactive':''">代驾</div>
			</div>			
			<div v-if="listtype == 0" class="box_list">
				<div class="title">实时任务</div>
				<div class="p">
					<div>未分配<span>{{orderlist.length}}单</span></div>
					<!-- <div>配送中<span>11单</span></div> -->
					<div>接单中代驾人员<span>{{peoplelength}}人</span></div>
				</div>
				<div class="list">
					<div class="li" v-for="(item,i) in orderlist">
						<div class="dl">待接单</div>
						<div class="dc" @click="details(1,i)">
							<div class="div">
								<div class="cl">
									<span class="s2">起</span>
								</div>
								<div class="cr">
									<p>{{item.start_adds}}</p>
									<p>{{item.name}}  {{item.phone}}</p>
								</div>
							</div>
							<div class="div">
								<div class="cl">
									<span class="s1">终</span>
								</div>
								<div class="cr">
									<p>{{item.target_adds}}</p>
									<!-- <p>{{item.name}}  {{item.phone}}</p> -->
								</div>
							</div>
						</div>
						<div class="dr" @click.stop>
							<div class="start" @click="details(2,i,item.store_id, item.uid)">派单</div>
							<!-- <div class="end" @click="end(1)" v-else>取消</div> -->
						</div>
					</div>
					<div class="wu" v-if="orderlistlength == 0">暂无订单</div>
				</div>
			</div>
			<div v-if="listtype == 1" class="details">
				<div class="top">
					<div class="dl">
						<i class="el-icon-arrow-left" @click="details(0,0)"></i>
						<el-button type="success" size="mini">配送</el-button>
					</div>
					<div class="dr">
						<el-button size="mini" plain type="success">未接单</el-button>
					</div>
				</div>
				<div class="c">
					<div class="personal" style="margin: 10px 0;">
						<div class="pl"><img :src="orderdetails.user.avatar_url" /></div>
						<div class="pr">
							<div class="t1">{{orderdetails.user.real_name}}</div>
							<div class="t2">{{orderdetails.user.phone}}</div>
						</div>
					</div>
					<div class="order">
						<div class="block"><span class="bl s1">取</span><span class="br">{{orderdetails.phone}}</span></div>
						<div class="block2">{{orderdetails.name}}/{{orderdetails.phone}}</div>
						<div class="block"><span class="bl s2">送</span><span class="br">{{orderdetails.phone}}</span></div>
						<div class="block2">{{orderdetails.name}}/{{orderdetails.phone}}</div>
					</div>
					<div class="tit"><span>订单详情</span></div>
					<div class="xinxi">
						<div class="li"><div class="xl">订单类型</div>
							<div class="xl" v-if="orderdetails.class_id==1">帮我买</div>
							<div class="xl" v-if="orderdetails.class_id==2">帮我送</div>
							<div class="xl" v-if="orderdetails.class_id==3">代排队</div>
							<div class="xl" v-if="orderdetails.class_id==4">代驾</div>
							<div class="xl" v-if="orderdetails.class_id==5">家政</div>
							<div class="xl" v-if="orderdetails.class_id==6">代办</div>
						</div>
						<div class="li"><div class="xl">订单来源</div><div class="xl">小程序</div></div>
						<div class="li"><div class="xl">是否议价</div><div class="xl">{{orderdetails.bargaining == 0?'否':'是'}}</div></div>
						<div class="li"><div class="xl">订单号</div><div class="xl">{{orderdetails.order_no}}</div></div>
						<div class="li"><div class="xl">下单时间</div><div class="xl">{{orderdetails.pay_time}}</div></div>
						<div class="xian"></div>
						<div class="li"><div class="xl">商品</div><div class="xl">{{orderdetails.goods}}</div></div>
						<div class="li"><div class="xl">备注</div><div class="xl">{{orderdetails.remark}}</div></div>
					</div>
					<div class="tit"><span>配送员</span></div>
					<div class="addpeisong" @click="details(3,0)"><i class="el-icon-plus"></i>分配配送员</div>
					<!-- <div class="personal">
						<div class="pl"><img src="https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKSicdNTbCM74fGmblb8yHgcMeYTZicvZkdVPrmKWnU4LKrNa8sAVGv9oiccJ6kqgCLxDibhXlTad9ibjg/132" /></div>
						<div class="pr">
							<div class="t1">老王</div>
							<div class="t2">1235463546</div>
						</div>
					</div> -->
				</div>
				<div class="bottom">
					<div class="bl">金额<span class="t1">￥<span class="num">{{orderdetails.total_price}}</span></span></div>
					<div class="br"><el-button type="primary" size="mini" @click='end(1)'>取消</el-button></div>
				</div>
			</div>
			<div v-if="listtype == 2" class="list3">
					<div class="title"><i class="el-icon-arrow-left" @click="details(0,0)"></i>实时任务</div>
					<div class="hidden">
						<div class="list2">
							<div class="li" v-for="(item,i) in people">
								<div class="l1"><img v-bind:src="item.avatar_url" /></div>
								<div class="l2">
									<div class="t1">{{item.nickname}}<span>{{item.phone}}</span></div>
									<div class="t2">距离：{{item.distance}}公里</div>
								</div>
								<div class="l3">
									<div class="t1" v-if="item.is_busy == 1">空闲中</div>
									<div class="t2" v-else>接单中</div>
								</div>
								<div class="l4">
									<el-button type="success" size="mini" @click='paidan(item.uid,item.nickname)'>分配</el-button>
								</div>
							</div>
						</div>
				</div>
			</div>
		</div>
    <div class="mapWrap r">
      <div class="qqmap" id="qqmapCont">
      </div>
      <div class="lngTips"></div>
    </div>

  </div>

</template>

<script>
  export default {
    props: {
      mapcenter: {
        type: String,
        default: '39.916527,116.397128'
      },
      oldmarker: {
        type: String,
        default: '39.916527,116.397128'
      },
      inputDefault: {
        type: String,
        default: ''
      }
    },
    data: function () {
      return {
        uid: '',
        storid: '',
				loading: false,
				orderlist:[],
				orderlistlength:0,
				orderdetails:'',
				arr:[1,2,3,4,5,6,7,8,9,1,1],
				people:[],
				peoplelength:'',
				listtype:0,
        qqmap: '',
				detail:'',
				drivingService:'',
				polyline:'',   //路线
        premarker: '',
				mapdata:[],
        marker: '',
		tab:1,
				markersArray:[],
        inputVal: '',
        latlngCurrent: '',
				page:{		//页数
					page:1,paginate:10,tabindex:1
				},
				timeout:null,
      }
    },
    mounted() {
      let that = this;
			clearInterval(that.timeout)
			that.Orderlist();
			//that.peoples();
			that.createMarker()
			that.timeout = setInterval(()=>{
				that.Orderlist();
			},10000);

      this.inputVal = this.inputDefault;
      if (this.oldmarker) {
        this.latlngCurrent = this.oldmarker || this.mapcenter;
      }
      if (typeof(qq) == 'object') {
        that.createMap();
      } else {
        this.loadQQmap();
      }
      window.onMapFileLoad = function () {
        console.log('qqmap加载完成')
        that.createMap();
      }
    },
	
		//销毁
		destroyed(){
			let that = this;
			// console.log('组件销毁')
			clearInterval(that.timeout)
		},
    watch: {
      oldmarker(newVal, oldVal) {
        if (newVal) {
          console.log(typeof newVal)
          this.latlngCurrent = newVal;
          this.qqmap&&this.createMarker()
        }
      },
      inputDefault(newVal, oldVal) {
        console.log('默认地址变成：', newVal)
        this.inputVal = newVal;
      }
    },
    methods: {
			//初始化地图
			initmap(){
				let that = this;
				var markersArray = that.markersArray;
				// console.log(markersArray)
				if(markersArray.length>0){
					markersArray.forEach((item,i)=>{
						markersArray[i].setMap(null)
					})
					markersArray = [];
					// console.log(markersArray)
				}
			},
			//路线规划
			plan(){
				let that = this;
				let directions_routes,
        directions_placemarks = [],
        directions_labels = [],
        start_marker,
        end_marker,
        route_lines = [],
        step_line,
        route_steps = [];
				that.drivingService = new qq.maps.DrivingService({
            complete : function(response){
                var start = response.detail.start,
                    end = response.detail.end;
                var anchor = new qq.maps.Point(6, 6),
                    size = new qq.maps.Size(24, 36),
                    start_icon = new qq.maps.MarkerImage(
                        'https://lbs.qq.com/javascript_v2/img/busmarker.png',
                        size,
                        new qq.maps.Point(0, 0),
                        anchor
                    ),
                    end_icon = new qq.maps.MarkerImage(
                        'https://lbs.qq.com/javascript_v2/img/busmarker.png',
                        size,
                        new qq.maps.Point(24, 0),
                        anchor
                    );
                start_marker && start_marker.setMap(null);
                end_marker && end_marker.setMap(null);
                //clearOverlay(route_lines);
                start_marker = new qq.maps.Marker({
                      icon: start_icon,
                      position: start.latLng,
                      map: that.qqmap,
                      zIndex:1
                });
                end_marker = new qq.maps.Marker({
                      icon: end_icon,
                      position: end.latLng,
                      map: that.qqmap,
                      zIndex:1
                });
               directions_routes = response.detail.routes;
               //所有可选路线方案
               for(var i = 0;i < directions_routes.length; i++){
                    var route = directions_routes[i],
                        legs = route;
                    //调整地图窗口显示所有路线
                    that.qqmap.fitBounds(response.detail.bounds);
                    //所有路程信息
                    //for(var j = 0 ; j < legs.length; j++){
                        var steps = legs.steps;
                        route_steps = steps;
                        that.polyline = new qq.maps.Polyline(
                            {
                                path: route.path,
                                strokeColor: '#3893F9',
                                strokeWeight: 6,
                                map: that.qqmap
                            }
                        )
                        route_lines.push(that.polyline);
               }
            }
        })
			},
			change(e){
				this.tab = e
				this.page.tabindex = e
				this.Orderlist()
			},
			//订单数据
			Orderlist(){
				// console.log('请求数据')
				let that = this;
				that.initmap()
				that.api.getTaskOrderList(that.page).then(function (res) {
					console.log('订单数据',res)
				  if (res.code == 1) {
				    that.orderlist = res.data.data;
						that.orderlistlength = res.data.data.length;
						//console.log(that.api.mapindex())
						that.api.mapindex({a:1}).then(function (ress) {
							that.people = ress.data;
							that.peoplelength = ress.data.length;
							that.Marker();
						}).catch(function (ress) {
						});
				  }
				}).catch(function (res) {
				});
			},
			//配送员数据
			peoples(location,type){				//参数1 位置信息     2类型
				let that = this;
        console.log(location)
				that.api.mapindex({lat:location.lat,lng:location.lng}).then(function (res) {
					that.people = res.data;
					that.peoplelength = res.data.length;
					if(type == 2){
						that.listtype = 2;
					}
					that.Marker()
				}).catch(function (res) {
				});
			},
			//派单
			paidan(i,name){
				console.log(this.uid);
				// return false;
				let that = this;
        var uid = that.uid;
				this.$confirm('确认将任务分配给'+ name +'吗？', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					console.log(that.orderdetails)
					//order_no:orderdetails.order_no
					that.api.mapassign_order({id:that.orderdetails.order_no, uid: uid, store_id: that.storid,did:i}).then(function (res) {
						if(res.code == 1){
							that.$message({
							  type: 'success',
							  message: res.msg
							});
							setTimeout(()=>{
								console.log('----定时执行')
								that.listtype = 0;
								that.Orderlist();
							},1000)
							that.timeout = setInterval(()=>{
								that.Orderlist();
							},10000);
						}else{
							that.$message.error(res.msg);
						}
					}).catch(function (res) {
					});
				}).catch(() => {

				});
				//console.log(i)
			},
			//订单详情
			details(type,i, storid, uid){
				let that = this;
        that.storid = storid;
        that.uid = uid;
				console.log(type + '---------' + i)
				clearInterval(that.timeout)
				if(type == 1){
					//先初始化
					that.initmap()
					that.orderdetails = that.orderlist[i];
					that.listtype = 1;
					if(that.orderdetails.start_adds_location.lat == that.orderdetails.target_adds_location.lat || that.orderdetails.start_adds_location.lng == that.orderdetails.target_adds_location.lng){
						var location = {lat:that.orderdetails.target_adds_location.lat,lng:that.orderdetails.target_adds_location.lng}
						that.biaodian(location,1)
					}else{
						that.plan()
						//查看路线
						that.drivingService.setPolicy(qq.maps.DrivingPolicy['LEAST_TIME']);
						//设置驾车的区域范围
						that.drivingService.setLocation(that.detail.name);
						//设置驾驶路线的起点和终点
						var start = new qq.maps.LatLng(that.orderdetails.start_adds_location.lat,that.orderdetails.start_adds_location.lng);
						var end = new qq.maps.LatLng(that.orderdetails.target_adds_location.lat,that.orderdetails.target_adds_location.lng);
						that.drivingService.search(start, end);
						that.drivingService.setError(function(data) {
						    //console.log(data);
						});
					}
					//console.log(that.markersArray)
					//that.qqmap.setMap(null);

				}else if(type == 2){
					that.orderdetails = that.orderlist[i];
					that.peoples(that.orderlist[i].start_adds_location,2)
					that.listtype = 2;
// 					that.timeout = setInterval(()=>{
// 						that.Orderlist();
// 						that.peoples();
// 						that.createMarker()
// 					},10000);
				}else if(type == 3){
					console.log()
					that.peoples(that.orderdetails.target_adds_location,2)
					that.listtype = 2;
				}else{
					that.loading = !that.loading;
					setTimeout(()=>{
						that.loading = !that.loading;
					},1000)
					console.log(that.qqmap)
					//that.premarker.setMap(null);
					//that.qqmap.setMap(null);
					that.Orderlist();
					that.Marker();
					that.timeout = setInterval(()=>{
						that.Orderlist();
// 						that.peoples();
// 						that.Marker()
					},10000);
					that.qqmap = new qq.maps.Map(document.getElementById("qqmapCont"), {
					  center: new qq.maps.LatLng(that.detail.latLng.lat, that.detail.latLng.lng),      // 地图的中心地理坐标。
					  zoom: 12,  // 地图的中心地理坐标。
					});
					//that.marker()
					//that.drivingService.clear()
					that.listtype = i;
				}
				//console.log(that.orderdetails)

			},
			//取消订单
			end(i){
				this.$confirm('确认将该配送任务取消吗，若该任务正在配送中，请您自行评估取消带来的风险及影响，取消后可重新进行派单！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {

        });
				//console.log(i)
			},
      loadQQmap() {
        let script = document.createElement("script");
        //设置标签的type属性
        script.type = "text/javascript";
        //设置标签的链接地址
        script.src = "https://map.qq.com/api/js?v=2.exp&callback=onMapFileLoad";
        //添加标签到dom
        document.body.appendChild(script);
      },
      createMap() {
        let that = this;
        this.qqmap = new qq.maps.Map(document.getElementById("qqmapCont"), {
          center: new qq.maps.LatLng(that.mapcenter.split(',')[0], that.mapcenter.split(',')[1]),      // 地图的中心地理坐标。
          zoom: 12,  // 地图的中心地理坐标。
        });
				this.createMarker();
//         setTimeout(() => {
// 					that.plan()
//           this.createMarker();
//           this.bindMapEvent()
//         }, 10000)
      },
			//添加标记
			Marker(){
				let that = this;
				var data = that.orderlist;				//订单数据
				var pordata = that.people;				//跑腿人员数据
				var list = [];										//默认数据
				if(data.length>0){
					data.forEach((item,i)=>{
						list.push({lat:item.target_adds_location.lat,lng:item.target_adds_location.lng,type:0,title:item.target_adds})
					})
				}
				if(pordata.length>0){
					pordata.forEach((item,i)=>{
						if(item.location){
							list.push({lat:item.location.lat,lng:item.location.lng,type:1,title:item})
						}
					})
				}
				if(list.length>0){
					//添加信息窗口
					list.forEach((item,i)=>{
						let $lngTipsBox = document.querySelector('.lngTips');
						let mapBoxWidth = window.getComputedStyle(document.querySelector('.mapWrap')).width;
						that.premarker = new qq.maps.Marker({
							position: new qq.maps.LatLng(item.lat, item.lng),
							//position: new qq.maps.LatLng(item.target_adds_location.lat, item.target_adds_location.lng),
							map: that.qqmap
						});
						that.markersArray.push(that.premarker)
						//移入事件
						qq.maps.event.addListener(that.premarker,"mouseover", (function(event){
							$lngTipsBox.style.display = 'block';
							$lngTipsBox.style.top = (event.pixel.y + 10) + 'px';
							$lngTipsBox.style.left = (event.pixel.x + 15) + 'px';
              console.log(item.title, '地址')
							$lngTipsBox.innerHTML = item.type==0?'地址:' + item.title: `<div>服务人员:${item.title.real_name}</div><div>工号:${item.title.work_number}</div><div>接单状态:${item.title.is_busy==1?'待接单':'接单中'}</div><div>工作状态:上班</div>`											//data[i].target_adds
							//console.log(i)
						}));
						//移除事件
						qq.maps.event.addListener(that.premarker, 'mouseout', function (event) {
						  $lngTipsBox.style.display = 'none';
						});
						var anchor = new qq.maps.Point(6, 0),
							size = new qq.maps.Size(46, 57),
							origin = item.type==0?new qq.maps.Point(24, 0):new qq.maps.Point(0, 0),
							icon = new qq.maps.MarkerImage(
									item.type==0?"https://lbs.qq.com/javascript_v2/img/busmarker.png":"https://driving.4hl.cn/uploads/Tmp/driver.png",
									size,
									origin,
									anchor
							);
							that.premarker.setIcon(icon);
						})
				}

			},
			//标点
			biaodian(list,i){			//i--0 数组    2--单个
				let that = this;
				if(i == 0){

				}else{
					that.premarker = new qq.maps.Marker({
						position: new qq.maps.LatLng(list.lat, list.lng),
						map: that.qqmap
					});
					that.markersArray.push(that.premarker)
					var anchor = new qq.maps.Point(6, 0),
						size = new qq.maps.Size(24, 36),
						origin = new qq.maps.Point(24, 0),
						icon = new qq.maps.MarkerImage(
								"https://lbs.qq.com/javascript_v2/img/busmarker.png",
								size,
								origin,
								anchor
						);
						that.premarker.setIcon(icon);
				}
			},
      createMarker() {
        let that = this;
				let citylocation = new qq.maps.CityService({
				  complete: function (result) {
						that.detail = result.detail
				    that.qqmap.setCenter(result.detail.latLng);
				  }
				});
				//调用searchLocalCity();方法
				citylocation.searchLocalCity();
        if (that.premarker) {
          that.premarker.setMap(null);
        }
				var data = that.orderlist;				//订单数据
				//console.log('第一次数据渲染')
				//console.log(data)
				//添加信息窗口
				data.forEach((item,i)=>{
					let $lngTipsBox = document.querySelector('.lngTips');
					let mapBoxWidth = window.getComputedStyle(document.querySelector('.mapWrap')).width;
					that.premarker = new qq.maps.Marker({
						position: new qq.maps.LatLng(item.target_adds_location.lat, item.target_adds_location.lng),
						map: that.qqmap
					});
					//移入事件
					qq.maps.event.addListener(that.premarker,"mouseover", (function(event){
						$lngTipsBox.style.display = 'block';
						$lngTipsBox.style.top = (event.pixel.y + 10) + 'px';
						$lngTipsBox.style.left = (event.pixel.x + 15) + 'px';
						$lngTipsBox.innerText = '地址:' + data[i].target_adds
						//console.log(i)
					}));
					//移除事件
					qq.maps.event.addListener(that.premarker, 'mouseout', function (event) {
					  $lngTipsBox.style.display = 'none';
					});
					var anchor = new qq.maps.Point(6, 0),
						size = new qq.maps.Size(24, 36),
						origin = new qq.maps.Point(0, 0),
						icon = new qq.maps.MarkerImage(
								"https://lbs.qq.com/javascript_v2/img/busmarker.png",
								size,
								origin,
								anchor
						);
						that.premarker.setIcon(icon);
					})
// 					let paodata = that.people;
// 					paodata.forEach((item,i)=>{
// 						let $lngTipsBox = document.querySelector('.lngTips');
// 						let mapBoxWidth = window.getComputedStyle(document.querySelector('.mapWrap')).width;
// 						that.premarker = new qq.maps.Marker({
// 							position: new qq.maps.LatLng(item.location.lat, item.location.lng),
// 							map: that.qqmap
// 						});
// 						//移入事件
// 						qq.maps.event.addListener(that.premarker,"mouseover", (function(event){
// 							$lngTipsBox.style.display = 'block';
// 							$lngTipsBox.style.top = (event.pixel.y + 10) + 'px';
// 							$lngTipsBox.style.left = (event.pixel.x + 15) + 'px';
// 							$lngTipsBox.innerText = '跑腿人员:' + paodata[i].name
// 						}));
// 						//移除事件
// 						qq.maps.event.addListener(that.premarker, 'mouseout', function (event) {
// 						  $lngTipsBox.style.display = 'none';
// 						});
// 						let anchor = new qq.maps.Point(6, 0),
// 							size = new qq.maps.Size(48, 36),
// 							origin = new qq.maps.Point(0, 0),
// 							icon = new qq.maps.MarkerImage(
// 									"https://lbs.qq.com/javascript_v2/img/busmarker.png",
// 									size,
// 									origin,
// 									anchor
// 							);
// 							that.premarker.setIcon(icon);
// 						})
// 					that.mapdata.forEach((item,i)=>{
// 						qq.maps.event.addListener(that.mapdata[i],"mouseover", (function(event){
// 								return function(){
// 									console.log(that.mapdata[i])
// // 									$lngTipsBox.style.display = 'block';
// // 									$lngTipsBox.style.top = (event.pixel.y + 10) + 'px';
// // 									$lngTipsBox.style.left = (event.pixel.x + 15) + 'px';
// // 									$lngTipsBox.innerText = '地址:' //+ item.start_adds;
// // 									console.log(that.mapdata[i])
// 								}
// 						})(i));
// 					})
					//console.log(that.premarker)
// 					data.forEach((item,i)=>{
// 						that.premarker = new qq.maps.Marker({
// 							//position: new qq.maps.LatLng(item.a, item.b),
// 							position: new qq.maps.LatLng(item.target_adds_location.lat, item.target_adds_location.lng),
// 							map: that.qqmap
// 						});
// 						var anchor = new qq.maps.Point(0, 39),
// 							size = new qq.maps.Size(30, 40),
// 							origin = new qq.maps.Point(0, 0),
// 							icon = new qq.maps.MarkerImage(
// 									"https://t1.hddhhn.com/uploads/tu/201903/512/3.jpg",
// 									size,
// 									origin,
// 									anchor
// 							);
// 							that.premarker.setIcon(icon);
// 						})

      },
      bindMapEvent() {
				//添加到提示窗
// 				let that = this;
// 				var data = that.orderlist;   //数据
//         // 地图鼠标滑动事件
//         let $lngTipsBox = document.querySelector('.lngTips');
//         let mapBoxWidth = window.getComputedStyle(document.querySelector('.mapWrap')).width;
// //         // 鼠标离开
//         qq.maps.event.addListener(that.qqmap, 'mouseout', function (event) {
//           $lngTipsBox.style.display = 'none';
//         });
      },
    },
  }
</script>

<style>
	.v{padding: 15px;display: flex;height: calc(100vh - 88px);background: #f5f7f9;color: #495060;line-height: 1.5;}
	.v .tab{display: flex;justify-content: space-around;align-items: center;height: 45px;line-height: 45px;width:380px;text-align: center;}
	.v .tab .tabactive{background: orange;color: #FFFFFF;width:100%;}
	.v .l{position: relative; width: 380px;}
  .v .l .box_list {
   width: 100%; height: 90%;overflow: scroll;
  }
	.v .l .title{position: absolute!important;top: 40px !important;left: 0px; width: 100%;height: 40px;text-align: center;line-height: 40px;font-size: 15px;font-weight: bold;background: #fff;border-bottom:1px solid #eee ;
		position: relative;}
	.v .l .title i{position: absolute;font-size: 20px;font-weight: bold;top: 10px;left: 10px;cursor: pointer;}
	.v .l .p{height: 40px;line-height: 40px;display: flex;font-size: 13px;}
	.v .l .p >div{margin-right: 10px;}
	.v .l .p span{color: #0082e6;}
	.hidden{overflow: hidden;flex: 1;flex-direction: column;width: 397px;overflow-y: scroll;}
	.list3{flex-direction: column;display: flex;overflow: hidden;height: 100%;padding-top: 40px;}
	.list{}
	.wu{padding: 20px;text-align: center;background: #fff;}
	.list .li{border-left:3px solid #13ce66 ;display: flex;background: #fff;cursor: pointer;margin-bottom: 10px;}
	.list .li .dl{width: 20px;font-size: 12px;display: flex;align-items: center;justify-content: center;color: #fff;background: #2d8cf0;
		border-bottom-right-radius: 10px;border-top-right-radius:10px;padding-left: 3px;}
	.list .li .dc{flex: 1;padding: 10px 0;}
	.list .li .dc .div{display: flex;}
	.list .li .dc .div:first-child{border-bottom:1px dashed #eee ;padding-bottom: 8px;margin-bottom: 8px;}
	.list .li .dc .div .cl{display: flex;align-items: center;justify-content: center;width: 40px;}
	.list .li .dc .div .cl span{width: 25px;height: 25px;border-radius: 50%;text-align: center;line-height: 25px;font-size: 12px;color: #fff;}
	.list .li .dc .div .cl .s1{background: #ed4014;}
	.list .li .dc .div .cl .s2{background: #13ce66;}
	.list .li .dc .div .cr{flex: 1;}
	.list .li .dc .div .cr p{line-height: 25px;margin: 0;font-size: 15px;color: #333;font-weight: 500;}
	.list .li .dr{width: 80px;display: flex;align-items: center;justify-content: flex-end;font-size: 13px;padding-right: 10px;}
	.list .li .dr .start{background: #0082e6;width: 50px;height: 50px;border-radius:50% ;text-align: center;line-height: 50px;color: #fff;}
	.list .li .dr .end{background: #red;width: 50px;height: 50px;border-radius:50% ;text-align: center;line-height: 50px;color: #fff;}

	.list2{}
	.list2 .li{margin-bottom: 10px;background: #fff;display: flex;width: 100%;height: 100px;align-items: center;padding: 10px;}
	.list2 .li .l1{width: 80px;display: flex;align-items: center;}
	.list2 .li .l1 img{width: 50px;height: 50px;border-radius:50% ;}
	.list2 .li .l2{width: 160px;}
	.list2 .li .l2 .t1{color: #333;font-size: 14px;}
	.list2 .li .l2 .t2{color: #999;font-size: 12px;margin-top: 5px;}
	.list2 .li .l3{width: 150px;font-size: 13px;justify-content: center;flex-direction: column;align-items: center;}
	.list2 .li .l3 >div{line-height: 1.5;}
	.list2 .li .l1{}

	/* 详情 */
	.details{padding: 0 10px;background: #fff;height: 100%;display: flex;flex-direction:column;overflow: hidden;}
	.details .top{display:flex;justify-content: space-between;align-items: center;height: 50px;border-bottom: 1px solid #eee;}
	.details .top .dl i{background: rgba(0,0,0,0.4);border-radius:50% ;color: #fff;font-size: 15px;padding: 3px;margin-right: 5px;}
	.details .c{flex: 1;flex-direction: column;overflow-y: scroll;width: 387px;padding-right: 10px;}
	.details .bottom{display:flex;justify-content: space-between;align-items: center;height: 50px;border-top: 1px solid #eee;}
	.details .bottom .bl{font-size: 12px;}
	.details .bottom .bl .t1{font-size: 14px;color: #ed4014;margin-left: 10px;}
	.details .bottom .bl .num{font-size: 18px;}
	.details .tit{display: table;white-space: nowrap;background: transparent;margin: 16px 0;font-size: 16px;}
	.details .tit:before,.details .tit:after{content: "";display: table-cell;position: relative;top: 50%;width: 50%;border-top: 1px solid #e9eaec;transform: translateY(50%);}
	.details .tit span{padding: 0 24px;}
	.details .xinxi{margin-top: 10;font-size: 13px;}
	.details .xinxi .li{display: flex;line-height: 30px;justify-content: space-between;}
	.details .xinxi .li .xr{color: #808695;}
	.details .xian{display: block;height: 1px;width: 100%;min-width: 100%;margin: 24px 0;clear: both;background: #e9eaec;}
	.details .personal{display: flex;align-items: center;}
	.details .personal .pl{width: 40px;}
	.details .personal .pl img{width: 40px;height: 40px;border-radius: 50%;}
	.details .personal .pr{flex: 1;margin-left: 10px;}
	.details .addpeisong{display: flex;justify-content: center;align-items: center;height: 50px;border: 1px dashed #2d8cf0;color: #2d8cf0;width: 100%;cursor: pointer;
		font-size: 12px;}
	.details .addpeisong i{font-size: 14px;margin-right: 5px;}
	.details .order .block{display: flex;align-items: center;}
	.details .order .block .s1{background: #ed4014;}
	.details .order .block .s2{background: #18b566;}
	.details .order .block .bl{width: 18px;height: 18px;font-size: 12px;text-align: center;line-height: 18px;border-radius: 50%;color: #fff;margin-right: 10px;}
	.details .order .block .br{color: #333;font-weight: 500;font-size: 14px;overflow: hidden;white-space: nowrap;max-width: 300px; text-overflow: ellipsis;}
	.details .order .block2{padding-left: 28px;color: #999;font-size: 14px;margin-bottom: 10px;}
	.v .r{flex: 1;height: 100%;margin-left: 15px;}
  .qqmap { width:100%;height: 100%;}
  .mapWrap { position:relative; width:100%; overflow:hidden;}
  .lngTips { display:none; line-height: 30px;padding:0px 10px; overflow:hidden; position:absolute; left:0; top:0; z-index:123456; background:rgba(0,0,0,0.5); border-radius:5px;
    box-shadow:#eeeeee 1px 1px 3px; border:#eeeeee 1px solid;font-size: 14px;color: #fff;}
</style>
